<template>
  <view class="add_address">

    <view class="add_address-form">
      <view class="add_address-form-horizontal">
        <view class="label">收货人：</view>
        <input
            class="assembly"
            placeholder-class="add_address-placeholder"
            placeholder="请填写收货人姓名"
            v-model="formData.name"
        />
      </view>
      <view class="add_address-form-horizontal">
        <view class="label">手机号：</view>
        <input
            class="assembly"
            type="tel"
            placeholder-class="add_address-placeholder"
            placeholder="请填写手机号码"
            v-model="formData.phone"
        />
      </view>

      <view class="add_address-form-horizontal">
        <view class="label">所在地区</view>

        <picker class="assembly"
                mode="multiSelector"
                :range="newCategotyAreaList"
                :value="multAreaIndex"
                range-key="name"
                @columnchange="pickerColumnDept"
                @change="bindPickerChange">
          <view :class="{'picker':!formData.city}">
            {{ formData.city || '请选择' }}
          </view>
        </picker>
        <image class="icon" src="/static/base/icon_jt_333.png"></image>
      </view>

      <view class="add_address-form-horizontal">
        <view class="label">详细地址：</view>
        <input
            class="assembly"
            placeholder-class="add_address-placeholder"
            placeholder="请输入详细地址"
            v-model="formData.address"
        />
      </view>

      <view class="add_address-form-horizontal">
        <view class="label">设为默认地址：</view>
        <image class="select" v-if="formData.is_top===0" src="/static/base/icon_30xuan.png"
               @click="formData.is_top=1"></image>
        <image class="select" v-if="formData.is_top===1" src="/static/base/icon_30dui.png"
               @click="formData.is_top=0"></image>
      </view>
    </view>


    <view v-if="!formData.address_id" class="base-bottom base-btn" @click="preservation">立即保存</view>
    <view v-if="!!formData.address_id" class="base-bottom basic-flex-center add_address-btns">
      <view class="basic-flex-center btn" @click="deleteAddress">删除</view>
      <view class="basic-flex-center btn btn_1" @click="preservation">保存</view>
    </view>

  </view>
</template>

<script>
import area from "../configure/mixins/area";
import {creatAddress, delAddress, getAddressInfo} from "../configure/api/my";

export default {
  mixins: [area],
  data() {
    return {
      isEdit: false,
      formData: {
        name: "",
        phone: "",
        city: "",
        address: "",
        is_top: 0,
      },
    };
  },
  onLoad(e) {
    this.queryArea()
    if (e.code && e.code === 'edit') {
      uni.setNavigationBarTitle({title: '编辑地址'})
      this.getInfo(e.id);
    } else {
      uni.setNavigationBarTitle({title: '新增地址'})
    }
  },
  methods: {
    getInfo(val) {
      getAddressInfo({"address_id": val}).then(res => {
        this.formData = res.data
        this.formData.address_id = this.formData.id
      })
    },
    bindPickerChange(e) {
      this.multAreaIndex = e.detail.value;
      // 安全检查，防止索引越界
      const firstArea = this.newCategotyAreaList[0][this.multAreaIndex[0]];
      const secondArea = this.newCategotyAreaList[1][this.multAreaIndex[1]];
      const thirdArea = this.newCategotyAreaList[2][this.multAreaIndex[2]];
      // 使用模板字符串拼接
      this.formData.city = `${firstArea?.name || ''} ${secondArea?.name || ''} ${thirdArea?.name || ''}`;
    },
    // 表单验证函数
    validateForm() {
      if (!this.formData.name) {
        return '请填写收货人姓名';
      }
      if (!this.formData.phone) {
        return '请填写手机号码';
      }
      if (!this.formData.city) {
        return '请选择所在地区';
      }
      if (!this.formData.address) {
        return '请输入详细地址';
      }

      return true; // 返回 true 表示表单验证通过
    },

    preservation() {
      const validationResult = this.validateForm();
      if (validationResult !== true) {
        this.$tip(validationResult, 'fail');
        return;
      }
      creatAddress({...this.formData}).then(res => {
        if (res.code === 0) {
          this.$tip('保存成功', 'success');
          setTimeout(() => {
            this.$utils.back()
          }, 500)
        } else {
          this.$tip(res.msg);
        }
      })
    },
    deleteAddress() {
      this.$tip('是否删除地址', 'ask', () => {
        delAddress({
          address_id: this.formData.address_id
        }).then(res => {
          this.$tip('删除成功', 'success');
          setTimeout(() => {
            this.$utils.back()
          }, 500);
        })
      })
    },
  },
}
</script>
<style>
page {
  background: #F7F8FA;
}
</style>
<style lang="scss" scoped>
.add_address {

  & > .add_address-form {
    margin: 10px 12px;
    padding: 0px 14px;
    background-color: #FFFFFF;
    border-radius: 10px;

    & > .add_address-form-horizontal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      gap: 5px;

      & > .label {
        font-weight: 400;
        font-size: 15px;
        color: #333333;
      }

      & > .assembly {
        flex: 1;
        font-size: 14px;
        text-align: right;
        line-height: 22px;

        & .picker {
          font-weight: 400;
          font-size: 14px;
          color: #CCCCCC;
        }
      }

      & > .select {
        width: 20px;
        height: 20px;
      }


      & > .icon {
        width: 14px;
        height: 14px;
      }

    }
  }

  & > .add_address-btns {
    width: 100%;
    gap: 12px;

    & > .btn {
      background: #FFFFFF;
      border-radius: 20px;
      border: 1px solid #CCCCCC;
      font-weight: bold;
      font-size: 15px;
      color: #666666;
      width: 160px;
      height: 40px;

    }

    & > .btn_1 {
      background: #FE1C41;
      color: #FFFFFF;
      border: 1px solid #FE1C41;
    }

  }

}
</style>